<template>
  <div class="app-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="left-buttons">
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
      </div>
      <div class="right-buttons">
        <el-button
          v-if="type !== 'view'"
          type="success"
          icon="el-icon-check"
          @click="saveData"
          >保存</el-button
        >
        <el-button type="" icon="el-icon-menu" @click="goToList"
          >列表</el-button
        >

        <el-button type="info" icon="el-icon-printer" @click="printForm"
          >打印</el-button
        >
      </div>
    </div>

    <table class="application-table">
      <caption>
        <h2>
          人事档案
          <el-checkbox
            v-model="formData.borrowType"
            :true-label="1"
            :false-label="2"
            :disabled="type === 'view'"
          >
            借出
          </el-checkbox>
          <el-checkbox
            v-model="formData.borrowType"
            :true-label="2"
            :false-label="1"
            :disabled="type === 'view'"
          >
            调阅
          </el-checkbox>
          申请表
        </h2>
      </caption>
      <tbody>
        <!-- 被申请人信息和申请人信息部分 -->
        <tr>
          <td rowspan="12">申请部门完成</td>
          <td>项目</td>
          <td colspan="3">被申请人信息</td>
          <td>申请人信息</td>
        </tr>
        <tr>
          <td>事业部</td>
          <td>
            <el-input
              v-model="formData.applicantBusinessDivision"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantBusinessDivision2"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantBusinessDivision3"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.requesterBusinessDivision"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>部门</td>
          <td>
            <el-input
              v-model="formData.applicantDepartment"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantDepartment2"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantDepartment3"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.requesterDepartment"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>职务</td>
          <td>
            <el-input
              v-model="formData.applicantPosition"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantPosition2"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantPosition3"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.requesterPosition"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>姓名</td>
          <td>
            <el-input
              v-model="formData.applicantName"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantName2"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantName3"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.requesterName"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>工号</td>
          <td>
            <el-input
              v-model="formData.applicantEmployeeNumber"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantEmployeeNumber2"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.applicantEmployeeNumber3"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.requesterEmployeeNumber"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>申请借出或调阅原因说明（必填）</td>
          <td colspan="4">
            <el-input
              type="textarea"
              v-model="formData.reason"
              :rows="3"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>申请借出日期</td>
          <td colspan="2">
            <el-date-picker
              v-model="formData.applyBorrowDate"
              type="date"
              :disabled="type === 'view'"
            />
          </td>
          <td>预计归还日期</td>
          <td colspan="2">
            <el-date-picker
              v-model="formData.expectedReturnDate"
              type="date"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>申请调阅日期</td>
          <td colspan="4">
            <el-date-picker
              v-model="formData.applyReviewDate"
              type="date"
              :disabled="type === 'view'"
            />
            (人事档案调阅只可以在档案室内查阅)
          </td>
        </tr>
        <tr>
          <td>复印资料名称和份数说明</td>
          <td colspan="4">
            <el-input
              type="textarea"
              v-model="formData.copyInfo"
              :rows="3"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <!-- 审批部分 -->
        <tr>
          <td>总裁/董事长</td>
          <td>企业管理部</td>
          <td>总经理</td>
          <td>总监/部长</td>
          <td>申请人</td>
        </tr>
        <tr>
          <td>
            <el-input
              v-model="formData.presidentApproval"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.managementDeptApproval"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.generalManagerApproval"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.directorApproval"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input
              v-model="formData.requesterApproval"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <!-- 实际操作部分 -->
        <tr>
          <td rowspan="5">企业管理部</td>
          <td>实际借出日期</td>
          <td colspan="2">
            <el-date-picker
              v-model="formData.actualBorrowDate"
              type="date"
              :disabled="type === 'view'"
            />
          </td>
          <td>实际归还日期</td>
          <td>
            <el-date-picker
              v-model="formData.actualReturnDate"
              type="date"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>实际调阅日期</td>
          <td colspan="2">
            <el-date-picker
              v-model="formData.actualReviewDate"
              type="date"
              :disabled="type === 'view'"
            />
          </td>
          <td>实际调阅起止时间</td>
          <td>
            <el-date-picker
              v-model="formData.actualStartDate"
              type="date"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td>归档人</td>
          <td colspan="2">借出归还人</td>
          <td>借出接收人</td>
          <td>经办人</td>
        </tr>
        <tr>
          <td>
            <el-input v-model="formData.filer" :disabled="type === 'view'" />
          </td>
          <td colspan="2">
            <el-input v-model="formData.returner" :disabled="type === 'view'" />
          </td>
          <td>
            <el-input
              v-model="formData.borrowReceiver"
              :disabled="type === 'view'"
            />
          </td>
          <td>
            <el-input v-model="formData.operator" :disabled="type === 'view'" />
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="4">
            <el-input
              type="textarea"
              v-model="formData.remark"
              :rows="3"
              :disabled="type === 'view'"
            />
          </td>
        </tr>
        <tr>
          <td colspan="6">           
    <p
      style="
        display: flex;
        justify-content: space-between;
        color: #757575;
        padding: 10px 0px;
      "
    >
      <span>表单编号及版本：AM-JY-288 A/1</span>
      <span>保存期限：长期</span>
    </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {
  getArchiveBorrowById,
  saveOrUpdateArchiveBorrow,
} from "@/api/archiveBorrow";

export default {
  name: "ArchiveBorrow",
  data() {
    return {
      type: "create",
      id: undefined,
      formData: {
        borrowType: 1,
        applicantBusinessDivision: "",
        applicantBusinessDivision2: "",
        applicantBusinessDivision3: "",
        applicantDepartment: "",
        applicantDepartment2: "",
        applicantDepartment3: "",
        applicantPosition: "",
        applicantPosition2: "",
        applicantPosition3: "",
        applicantName: "",
        applicantName2: "",
        applicantName3: "",
        applicantEmployeeNumber: "",
        applicantEmployeeNumber2: "",
        applicantEmployeeNumber3: "",
        requesterBusinessDivision: "",
        requesterDepartment: "",
        requesterPosition: "",
        requesterName: "",
        requesterEmployeeNumber: "",
        reason: "",
        applyBorrowDate: "",
        expectedReturnDate: "",
        applyReviewDate: "",
        copyInfo: "",
        presidentApproval: "",
        managementDeptApproval: "",
        generalManagerApproval: "",
        directorApproval: "",
        requesterApproval: "",
        actualBorrowDate: "",
        actualReturnDate: "",
        actualReviewDate: "",
        actualStartDate: "",
        filer: "",
        returner: "",
        borrowReceiver: "",
        operator: "",
        remark: "",
      },
    };
  },
  created() {
    const { type, id } = this.$route.query;
    this.type = type || "create";
    this.id = id;

    if (this.id) {
      this.fetchData();
    }
  },
  methods: {
    printForm() {
      window.print();
    },
    fetchData() {
      getArchiveBorrowById(this.id).then((response) => {
        this.formData = response.data.data;
      });
    },
    saveData() {
      // 表单验证
      if (
        !this.formData.applicantName &&
        !this.formData.applicantName2 &&
        !this.formData.applicantName3
      ) {
        this.$message({
          message: "请至少填写一个被申请人姓名",
          type: "warning",
        });
        return;
      }

      if (!this.formData.reason) {
        this.$message({
          message: "请填写申请原因",
          type: "warning",
        });
        return;
      }

      if (this.formData.borrowType === 1 && !this.formData.applyBorrowDate) {
        this.$message({
          message: "请选择申请借出日期",
          type: "warning",
        });
        return;
      }

      if (this.formData.borrowType === 2 && !this.formData.applyReviewDate) {
        this.$message({
          message: "请选择申请调阅日期",
          type: "warning",
        });
        return;
      }

      saveOrUpdateArchiveBorrow(this.formData).then(() => {
        this.$message({
          type: "success",
          message: this.type === "create" ? "创建成功!" : "更新成功!",
        });
        this.goToList();
      });
    },
    goToList() {
      this.$router.push("/main/renshi/renshizhidu/rsdajiechu/rsdajiechuList");
    },
    goBack() {
      this.$router.push("/main/renshi/renshizhidu");
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  /* background-color: #f5f7fa; */
  min-height: 100vh;
  width: 210mm;
  margin: 0 auto;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  align-items: center;
}

.left-buttons {
  display: flex;
  align-items: center;
}

.right-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.application-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.application-table td {
  border: 1px solid #ebeef5;
  padding: 12px;
  text-align: center;
}

.application-table caption {
  padding: 12px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}

.application-table caption h2 {
  margin: 0;
  font-size: 1.2em;
  color: #303133;
}

/* Element UI 组件样式调整 */
.el-input {
  width: 100%;
}

.el-date-picker {
  width: 100%;
}

.el-checkbox {
  margin-right: 15px;
}

.el-textarea__inner {
  min-height: 80px;
}
::v-deep .el-input__inner {
  height: 30px !important;
}
@media print {
  .toolbar {
    display: none !important;
  }
  ::v-deep .application-table caption {
    padding: 0px !important;
  }
  ::v-deep input.el-input__inner {
    border: none !important;
  }
  ::v-deep textarea.el-textarea__inner {
    border: none !important;
    resize: none;
  }
  ::v-deep i.el-input__icon {
    display: none !important;
  }
}
</style>